<!DOCTYPE html>
<html lang="en">

<head>
    <title>Tables Advanced | Tables</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="Thu, 19 Nov 1900 08:52:00 GMT">
    <link rel="shortcut icon" href="images/icons/favicon.ico">
    <link rel="apple-touch-icon" href="images/icons/favicon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png">
    <!--Loading bootstrap css-->
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
    <link type="text/css" rel="stylesheet" href="vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
    <link type="text/css" rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="vendors/bootstrap/css/bootstrap.min.css">
    <!--LOADING STYLESHEET FOR PAGE-->
    <link type="text/css" rel="stylesheet" href="vendors/jquery-tablesorter/themes/blue/style-custom.css">
    <!--Loading style vendors-->
    <link type="text/css" rel="stylesheet" href="vendors/animate.css/animate.css">
    <link type="text/css" rel="stylesheet" href="vendors/jquery-pace/pace.css">
    <link type="text/css" rel="stylesheet" href="vendors/iCheck/skins/all.css">
    <link type="text/css" rel="stylesheet" href="vendors/jquery-notific8/jquery.notific8.min.css">
    <link type="text/css" rel="stylesheet" href="vendors/bootstrap-daterangepicker/daterangepicker-bs3.css">
    <!--Loading style-->
    <link type="text/css" rel="stylesheet" href="css/themes/style1/orange-blue.css" class="default-style">
    <link type="text/css" rel="stylesheet" href="css/themes/style1/orange-blue.css" id="theme-change" class="style-change color-change">
    <link type="text/css" rel="stylesheet" href="css/style-responsive.css">
</head>

<body class=" ">
    <div>
        <div class="news-ticker bg-orange">
            <div class="container">
                <ul id="news-ticker-content" class="list-unstyled mbn">
                    <li><a href='http://madmin.swlabs.co/' , target='_blank'>This is HTML app version of this template. To see Angular app version, please click here</a>
                    </li>
                </ul><a id="news-ticker-close" href="javascript:;"><i class="fa fa-times"></i></a>
            </div>
        </div>
        <!--BEGIN BACK TO TOP--><a id="totop" href="#"><i class="fa fa-angle-up"></i></a>
        <!--END BACK TO TOP-->
        <!--BEGIN TOPBAR-->
        <div id="header-topbar-option-demo" class="page-header-topbar">
            <nav id="topbar" role="navigation" style="margin-bottom: 0; z-index: 2;" class="navbar navbar-default navbar-static-top">
                <div class="navbar-header">
                    <button type="button" data-toggle="collapse" data-target=".sidebar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                    </button><a id="logo" href="index.html" class="navbar-brand"><span class="fa fa-rocket"></span><span class="logo-text">µAdmin</span><span style="display: none" class="logo-text-icon">µ</span></a>
                </div>
                <div class="topbar-main"><a id="menu-toggle" href="#" class="hidden-xs"><i class="fa fa-bars"></i></a>
                    <ul class="nav navbar-nav    ">
                        <li class="active"><a href="index.html">Dashboard</a>
                        </li>
                        <li><a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle">Layouts
&nbsp;<i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="layout-left-sidebar.html">Left Sidebar</a>
                                </li>
                                <li><a href="layout-right-sidebar.html">Right Sidebar</a>
                                </li>
                                <li><a href="layout-left-sidebar-collapsed.html">Left Sidebar Collasped</a>
                                </li>
                                <li><a href="layout-right-sidebar-collapsed.html">Right Sidebar Collasped</a>
                                </li>
                                <li class="dropdown-submenu"><a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle">More Options</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Second level link</a>
                                        </li>
                                        <li class="dropdown-submenu"><a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle">More Options</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Third level link</a>
                                                </li>
                                                <li><a href="#">Third level link</a>
                                                </li>
                                                <li><a href="#">Third level link</a>
                                                </li>
                                                <li><a href="#">Third level link</a>
                                                </li>
                                                <li><a href="#">Third level link</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Second level link</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="mega-menu-dropdown"><a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle">UI Elements
&nbsp;<i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <div class="mega-menu-content">
                                        <div class="row">
                                            <ul class="col-md-4 mega-menu-submenu">
                                                <li>
                                                    <h3>Neque porro quisquam</h3>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Consectetur adipisicing elit</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Sed ut perspiciatis unde omnis</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>At vero eos et accusamus et iusto</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Nam libero tempore cum soluta</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Et harum quidem rerum facilis est</a>
                                                </li>
                                            </ul>
                                            <ul class="col-md-4 mega-menu-submenu">
                                                <li>
                                                    <h3>Neque porro quisquam</h3>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Consectetur adipisicing elit</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Sed ut perspiciatis unde omnis</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>At vero eos et accusamus et iusto</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Nam libero tempore cum soluta</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Et harum quidem rerum facilis est</a>
                                                </li>
                                            </ul>
                                            <ul class="col-md-4 mega-menu-submenu">
                                                <li>
                                                    <h3>Neque porro quisquam</h3>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Consectetur adipisicing elit</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Sed ut perspiciatis unde omnis</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>At vero eos et accusamus et iusto</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Nam libero tempore cum soluta</a>
                                                </li>
                                                <li><a href="#"><i class="fa fa-angle-right"></i>Et harum quidem rerum facilis est</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="mega-menu-dropdown mega-menu-full"><a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle">Extras
&nbsp;<i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <div class="mega-menu-content">
                                        <div class="row">
                                            <div class="col-md-7">
                                                <ul class="col-md-4 mega-menu-submenu">
                                                    <li>
                                                        <h3>Neque porro quisquam</h3>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Consectetur adipisicing elit</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Sed ut perspiciatis unde omnis</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>At vero eos et accusamus et iusto</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Nam libero tempore cum soluta</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Et harum quidem rerum facilis est</a>
                                                    </li>
                                                </ul>
                                                <ul class="col-md-4 mega-menu-submenu">
                                                    <li>
                                                        <h3>Neque porro quisquam</h3>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Consectetur adipisicing elit</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Sed ut perspiciatis unde omnis</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>At vero eos et accusamus et iusto</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Nam libero tempore cum soluta</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Et harum quidem rerum facilis est</a>
                                                    </li>
                                                </ul>
                                                <ul class="col-md-4 mega-menu-submenu">
                                                    <li>
                                                        <h3>Neque porro quisquam</h3>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Consectetur adipisicing elit</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Sed ut perspiciatis unde omnis</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>At vero eos et accusamus et iusto</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Nam libero tempore cum soluta</a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-angle-right"></i>Et harum quidem rerum facilis est</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="col-md-5 document-demo">
                                                <ul class="col-md-4 mega-menu-submenu">
                                                    <li><a href="#"><i class="fa fa-info-circle"></i><span>Introduction</span></a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-download"></i><span>Installation</span></a>
                                                    </li>
                                                </ul>
                                                <ul class="col-md-4 mega-menu-submenu">
                                                    <li><a href="#"><i class="fa fa-cog"></i><span>T3 Settings</span></a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-desktop"></i><span>Layout System</span></a>
                                                    </li>
                                                </ul>
                                                <ul class="col-md-4 mega-menu-submenu">
                                                    <li><a href="#"><i class="fa fa-magic"></i><span>Customization</span></a>
                                                    </li>
                                                    <li><a href="#"><i class="fa fa-question-circle"></i><span>FAQs</span></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <form id="topbar-search" action="#" method="GET" class="hidden-xs">
                        <div class="input-group">
                            <input type="text" placeholder="Search..." class="form-control" /><span class="input-group-btn"><a href="javascript:;" class="btn submit"><i class="fa fa-search"></i></a></span>
                        </div>
                    </form>
                    <ul class="nav navbar navbar-top-links navbar-right mbn">
                        <li class="dropdown"><a data-hover="dropdown" href="#" class="dropdown-toggle"><i class="fa fa-bell fa-fw"></i><span class="badge badge-green">3</span></a>
                            <ul class="dropdown-menu dropdown-alerts">
                                <li>
                                    <p>You have 14 new notifications</p>
                                </li>
                                <li>
                                    <div class="dropdown-slimscroll">
                                        <ul>
                                            <li><a href="extra-user-list.html" target="_blank"><span class="label label-blue"><i class="fa fa-comment"></i></span>New Comment<span class="pull-right text-muted small">4 mins ago</span></a>
                                            </li>
                                            <li><a href="extra-user-list.html" target="_blank"><span class="label label-violet"><i class="fa fa-twitter"></i></span>3 New Followers<span class="pull-right text-muted small">12 mins ago</span></a>
                                            </li>
                                            <li><a href="extra-user-list.html" target="_blank"><span class="label label-pink"><i class="fa fa-envelope"></i></span>Message Sent<span class="pull-right text-muted small">15 mins ago</span></a>
                                            </li>
                                            <li><a href="extra-user-list.html" target="_blank"><span class="label label-green"><i class="fa fa-tasks"></i></span>New Task<span class="pull-right text-muted small">18 mins ago</span></a>
                                            </li>
                                            <li><a href="extra-user-list.html" target="_blank"><span class="label label-yellow"><i class="fa fa-upload"></i></span>Server Rebooted<span class="pull-right text-muted small">19 mins ago</span></a>
                                            </li>
                                            <li><a href="extra-user-list.html" target="_blank"><span class="label label-green"><i class="fa fa-tasks"></i></span>New Task<span class="pull-right text-muted small">2 days ago</span></a>
                                            </li>
                                            <li><a href="extra-user-list.html" target="_blank"><span class="label label-pink"><i class="fa fa-envelope"></i></span>Message Sent<span class="pull-right text-muted small">5 days ago</span></a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="last"><a href="extra-user-list.html" class="text-right">See all alerts</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown"><a data-hover="dropdown" href="#" class="dropdown-toggle"><i class="fa fa-envelope fa-fw"></i><span class="badge badge-orange">7</span></a>
                            <ul class="dropdown-menu dropdown-messages">
                                <li>
                                    <p>You have 14 new messages</p>
                                </li>
                                <li>
                                    <div class="dropdown-slimscroll">
                                        <ul>
                                            <li><a href="email-view-mail.html" target="_blank"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">Jessica Spencer</span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a>
                                            </li>
                                            <li><a href="email-view-mail.html" target="_blank"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Smith<span class="label label-blue pull-right">New</span></span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a>
                                            </li>
                                            <li><a href="email-view-mail.html" target="_blank"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Doe<span class="label label-orange pull-right">10 min</span></span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a>
                                            </li>
                                            <li><a href="email-view-mail.html" target="_blank"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Smith</span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a>
                                            </li>
                                            <li><a href="email-view-mail.html" target="_blank"><span class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle"/></span><span class="info"><span class="name">John Smith</span><span class="desc">Lorem ipsum dolor sit amet...</span></span></a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="last"><a href="email-view-mail.html" target="_blank">Read all messages</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown"><a data-hover="dropdown" href="#" class="dropdown-toggle"><i class="fa fa-tasks fa-fw"></i><span class="badge badge-yellow">8</span></a>
                            <ul class="dropdown-menu dropdown-tasks">
                                <li>
                                    <p>You have 14 pending tasks</p>
                                </li>
                                <li>
                                    <div class="dropdown-slimscroll">
                                        <ul>
                                            <li><a href="page-blog-item.html" target="_blank"><span class="task-item">Fix the HTML code<small class="pull-right text-muted">40%</small></span><div class="progress progress-sm"><div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;" class="progress-bar progress-bar-orange"><span class="sr-only">40% Complete (success)</span></div></div></a>
                                            </li>
                                            <li>
                                                <a href="page-blog-item.html" target="_blank"> <span class="task-item">Make a wordpress theme<small class="pull-right text-muted">60%</small></span>
                                                    <div class="progress progress-sm">
                                                        <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" class="progress-bar progress-bar-blue"><span class="sr-only">60% Complete (success)</span>
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="page-blog-item.html" target="_blank"> <span class="task-item">Convert PSD to HTML<small class="pull-right text-muted">55%</small></span>
                                                    <div class="progress progress-sm">
                                                        <div role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%;" class="progress-bar progress-bar-green"><span class="sr-only">55% Complete (success)</span>
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="page-blog-item.html" target="_blank"> <span class="task-item">Convert HTML to Wordpress<small class="pull-right text-muted">78%</small></span>
                                                    <div class="progress progress-sm">
                                                        <div role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%;" class="progress-bar progress-bar-yellow"><span class="sr-only">78% Complete (success)</span>
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="last"><a href="page-blog-item.html" target="_blank">See all tasks</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown topbar-user">
                            <a data-hover="dropdown" href="#" class="dropdown-toggle"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/48.jpg" alt="" class="img-responsive img-circle" />&nbsp;<span class="hidden-xs">John Doe</span>&nbsp;<span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu dropdown-user pull-right">
                                <li><a href="extra-profile.html"><i class="fa fa-user"></i>My Profile</a>
                                </li>
                                <li><a href="page-calendar.html"><i class="fa fa-calendar"></i>My Calendar</a>
                                </li>
                                <li><a href="email-inbox.html"><i class="fa fa-envelope"></i>My Inbox<span class="badge badge-danger">3</span></a>
                                </li>
                                <li><a href="#"><i class="fa fa-tasks"></i>My Tasks<span class="badge badge-success">7</span></a>
                                </li>
                                <li class="divider"></li>
                                <li><a href="extra-lock-screen.html"><i class="fa fa-lock"></i>Lock Screen</a>
                                </li>
                                <li><a href="extra-signin.html"><i class="fa fa-key"></i>Log Out</a>
                                </li>
                            </ul>
                        </li>
                        <li id="topbar-chat" class="hidden-xs"><a href="javascript:void(0)" class="btn-chat"><i class="fa fa-comments"></i><span class="badge badge-info">3</span></a>
                        </li>
                        <li class="dropdown hidden-xs">
                            <!--BEGIN THEME SETTING--><a id="theme-setting" href="javascript:;" data-hover="dropdown" data-step="1" data-intro="&lt;b&gt;Header&lt;/b&gt;, &lt;b&gt;sidebar&lt;/b&gt;, &lt;b&gt;border style&lt;/b&gt; and &lt;b&gt;color&lt;/b&gt;, all of them can change for you to create the best" data-position="left" class="dropdown-toggle"><i class="fa fa-cogs"></i></a>
                            <ul class="dropdown-menu dropdown-theme-setting pull-right">
                                <li>
                                    <h4 class="mtn">Theme Styles</h4>
                                    <select id="list-style" class="form-control">
                                        <option value="style1">Flat Squared style</option>
                                        <option value="style2">Flat Rounded style</option>
                                        <option value="style3">Flat Border style</option>
                                    </select>
                                </li>
                                <li>
                                    <h4 class="mtn">Menu Styles</h4>
                                    <select id="list-menu" class="form-control">
                                        <option value="sidebar-default">Menu style 1</option>
                                        <option value="sidebar-colors">Menu style 2</option>
                                        <option value="sidebar-icons">Menu style 3</option>
                                        <option value="sidebar-collapsed">Menu style 4</option>
                                    </select>
                                </li>
                                <li>
                                    <h4 class="mtn">Header & Sidebar</h4>
                                    <select id="list-header" class="form-control">
                                        <option value="header-static">Static</option>
                                        <option value="header-fixed">Fixed</option>
                                    </select>
                                </li>
                                <li>
                                    <h4 class="mtn">Theme Colors</h4>
                                    <ul id="list-color" class="list-unstyled list-inline">
                                        <li data-color="green-dark" data-hover="tooltip" title="Green - Dark" class="green-dark"></li>
                                        <li data-color="red-dark" data-hover="tooltip" title="Red - Dark" class="red-dark"></li>
                                        <li data-color="pink-dark" data-hover="tooltip" title="Pink - Dark" class="pink-dark"></li>
                                        <li data-color="blue-dark" data-hover="tooltip" title="Blue - Dark" class="blue-dark"></li>
                                        <li data-color="yellow-dark" data-hover="tooltip" title="Yellow - Dark" class="yellow-dark"></li>
                                        <li data-color="green-grey" data-hover="tooltip" title="Green - Grey" class="green-grey"></li>
                                        <li data-color="red-grey" data-hover="tooltip" title="Red - Grey" class="red-grey"></li>
                                        <li data-color="pink-grey" data-hover="tooltip" title="Pink - Grey" class="pink-grey"></li>
                                        <li data-color="blue-grey" data-hover="tooltip" title="Blue - Grey" class="blue-grey"></li>
                                        <li data-color="yellow-grey" data-hover="tooltip" title="Yellow - Grey" class="yellow-grey"></li>
                                        <li data-color="yellow-green" data-hover="tooltip" title="Yellow - Green" class="yellow-green"></li>
                                        <li data-color="orange-grey" data-hover="tooltip" title="Orange - Grey" class="orange-grey"></li>
                                        <li data-color="pink-blue" data-hover="tooltip" title="Pink - Blue" class="pink-blue"></li>
                                        <li data-color="pink-violet" data-hover="tooltip" title="Pink - Violet" class="pink-violet active"></li>
                                        <li data-color="orange-violet" data-hover="tooltip" title="Orange - Violet" class="orange-violet"></li>
                                        <li data-color="pink-green" data-hover="tooltip" title="Pink - Green" class="pink-green"></li>
                                        <li data-color="pink-brown" data-hover="tooltip" title="Pink - Brown" class="pink-brown"></li>
                                        <li data-color="orange-blue" data-hover="tooltip" title="Orange - Blue" class="orange-blue"></li>
                                        <li data-color="yellow-blue" data-hover="tooltip" title="Yellow - Blue" class="yellow-blue"></li>
                                        <li data-color="green-blue" data-hover="tooltip" title="Green - Blue" class="green-blue"></li>
                                    </ul>
                                </li>
                            </ul>
                            <!--END THEME SETTING-->
                        </li>
                    </ul>
                </div>
            </nav>
            <!--BEGIN MODAL CONFIG PORTLET-->
            <div id="modal-config" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" data-dismiss="modal" aria-hidden="true" class="close">&times;</button>
                            <h4 class="modal-title">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend et nisl eget porta. Curabitur elementum sem molestie nisl varius, eget tempus odio molestie. Nunc vehicula sem arcu, eu pulvinar neque cursus ac. Aliquam ultricies lobortis magna et aliquam. Vestibulum egestas eu urna sed ultricies. Nullam pulvinar dolor vitae quam dictum condimentum. Integer a sodales elit, eu pulvinar leo. Nunc nec aliquam nisi, a mollis neque. Ut vel felis quis tellus hendrerit placerat. Vivamus vel nisl non magna feugiat dignissim sed ut nibh. Nulla elementum, est a pretium hendrerit, arcu risus luctus augue, mattis aliquet orci ligula eget massa. Sed ut ultricies felis.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--END MODAL CONFIG PORTLET-->
        </div>
        <!--END TOPBAR-->
        <div id="wrapper">
            <!--BEGIN SIDEBAR MENU-->
            <nav id="sidebar" role="navigation" class="navbar-default navbar-static-side">
                <div class="sidebar-collapse menu-scroll">
                    <ul id="side-menu" class="nav">
                        <li class="user-panel">
                            <div class="thumb"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" alt="" class="img-circle" />
                            </div>
                            <div class="info">
                                <p>John Doe</p>
                                <ul class="list-inline list-unstyled">
                                    <li><a href="extra-profile.html" data-hover="tooltip" title="Profile"><i class="fa fa-user"></i></a>
                                    </li>
                                    <li><a href="email-inbox.html" data-hover="tooltip" title="Mail"><i class="fa fa-envelope"></i></a>
                                    </li>
                                    <li><a href="#" data-hover="tooltip" title="Setting" data-toggle="modal" data-target="#modal-config"><i class="fa fa-cog"></i></a>
                                    </li>
                                    <li><a href="extra-signin.html" data-hover="tooltip" title="Logout"><i class="fa fa-sign-out"></i></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                        </li>
                        <li><a href="index.html"><i class="fa fa-tachometer fa-fw"><div class="icon-bg bg-orange"></div></i><span class="menu-title">Dashboard</span></a>
                        </li>
                        <li><a href="http://madmin.swlabs.co/" target="_blank"><i class="fa fa-bullhorn fa-fw"><div class="icon-bg bg-orange"></div></i><span class="menu-title">Angular JS Version</span><span class="label label-violet">v4.0</span></a>
                        </li>
                        <li><a href="#"><i class="fa fa-laptop fa-fw"><div class="icon-bg bg-pink"></div></i><span class="menu-title">Frontend</span><span class="fa arrow"></span><span class="label label-yellow">v3.0</span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="frontend-one-page.html"><i class="fa fa-rocket"></i><span class="submenu-title">One Page</span></a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-desktop fa-fw"><div class="icon-bg bg-pink"></div></i><span class="menu-title">Layouts</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="layout-left-sidebar.html"><i class="fa fa-align-left"></i><span class="submenu-title">Left Sidebar</span></a>
                                </li>
                                <li><a href="layout-left-sidebar-collapsed.html"><i class="fa fa-angle-double-left"></i><span class="submenu-title">Left Sidebar Collapsed</span></a>
                                </li>
                                <li><a href="layout-right-sidebar.html"><i class="fa fa-align-right"></i><span class="submenu-title">Right Sidebar</span></a>
                                </li>
                                <li><a href="layout-right-sidebar-collapsed.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Right Sidebar Collapsed</span></a>
                                </li>
                                <li><a href="layout-horizontal-menu.html"><i class="fa fa-header"></i><span class="submenu-title">Horizontal Menu</span></a>
                                </li>
                                <li><a href="layout-horizontal-menu-sidebar.html"><i class="fa fa-h-square"></i><span class="submenu-title">Horizontal Menu & Sidebar</span></a>
                                </li>
                                <li><a href="layout-fixed-topbar.html"><i class="fa fa-magnet"></i><span class="submenu-title">Fixed Topbar</span></a>
                                </li>
                                <li><a href="layout-boxed.html"><i class="fa fa-columns"></i><span class="submenu-title">Boxed Layout</span></a>
                                </li>
                                <li><a href="layout-hidden-footer.html"><i class="fa fa-eye-slash"></i><span class="submenu-title">Hidden Footer</span></a>
                                </li>
                                <li><a href="layout-header-topbar.html"><i class="fa fa-paperclip"></i><span class="submenu-title">Header & Topbar</span></a>
                                </li>
                                <li><a href="layout-title-breadcrumb.html"><i class="fa fa-link"></i><span class="submenu-title">Title & Breadcrumb</span></a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-send-o fa-fw"><div class="icon-bg bg-green"></div></i><span class="menu-title">UI Elements</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="ui-generals.html"><i class="fa fa-briefcase"></i><span class="submenu-title">Generals</span></a>
                                </li>
                                <li><a href="ui-portlets.html"><i class="fa fa-instagram"></i><span class="submenu-title">Portlets</span></a>
                                </li>
                                <li><a href="ui-buttons.html"><i class="fa fa-hand-o-up"></i><span class="submenu-title">Buttons</span></a>
                                </li>
                                <li><a href="ui-tabs.html"><i class="fa fa-trello"></i><span class="submenu-title">Tabs</span></a>
                                </li>
                                <li><a href="ui-progressbars.html"><i class="fa fa-ellipsis-h"></i><span class="submenu-title">Progress Bars</span></a>
                                </li>
                                <li><a href="ui-typography.html"><i class="fa fa-font"></i><span class="submenu-title">Typography</span></a>
                                </li>
                                <li><a href="ui-modals.html"><i class="fa fa-list-alt"></i><span class="submenu-title">Modals</span></a>
                                </li>
                                <li><a href="ui-sliders.html"><i class="fa fa-arrows-h"></i><span class="submenu-title">Sliders</span></a>
                                </li>
                                <li><a href="ui-icons.html"><i class="fa fa-tint"></i><span class="submenu-title">Icons</span></a>
                                </li>
                                <li><a href="ui-checkbox-radio.html"><i class="fa fa-dot-circle-o"></i><span class="submenu-title">Checkbox & Radio</span></a>
                                </li>
                                <li><a href="ui-panels.html"><i class="fa fa-th-large"></i><span class="submenu-title">Panels</span></a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-rocket fa-fw"><div class="icon-bg bg-green"></div></i><span class="menu-title">UI Advanced</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="ui-preloader.html"><i class="fa fa-spinner"></i><span class="submenu-title">Preloader</span><span class="label label-yellow">v4.1</span></a>
                                </li>
                                <li><a href="ui-editors.html"><i class="fa fa-edit"></i><span class="submenu-title">Editors</span></a>
                                </li>
                                <li><a href="ui-nestable-list.html"><i class="fa fa-list-ol"></i><span class="submenu-title">Nestable List</span></a>
                                </li>
                                <li><a href="ui-dropdown-select.html"><i class="fa fa-level-down"></i><span class="submenu-title">Dropdown Select</span><span class="label label-yellow">v2.1</span></a>
                                </li>
                                <li><a href="ui-notific8-notifications.html"><i class="fa fa-exclamation-circle"></i><span class="submenu-title">Notific8 & Message</span><span class="label label-blue">v2.1</span></a>
                                </li>
                                <li><a href="ui-toastr-notifications.html"><i class="fa fa-exclamation-triangle"></i><span class="submenu-title">Toastr Notifications</span></a>
                                </li>
                                <li><a href="ui-treeview.html"><i class="fa fa-tasks"></i><span class="submenu-title">Tree View</span></a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-edit fa-fw"><div class="icon-bg bg-violet"></div></i><span class="menu-title">Forms</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="form-layouts.html"><i class="fa fa-columns"></i><span class="submenu-title">Form Layouts</span></a>
                                </li>
                                <li><a href="form-basic.html"><i class="fa fa-file-text-o"></i><span class="submenu-title">Form Basics</span></a>
                                </li>
                                <li><a href="form-components.html"><i class="fa fa-cube"></i><span class="submenu-title">Form Components</span></a>
                                </li>
                                <li><a href="form-xeditable.html"><i class="fa fa-edit"></i><span class="submenu-title">Form X-editable</span></a>
                                </li>
                                <li><a href="form-wizard.html"><i class="fa fa-magic"></i><span class="submenu-title">Form Wizard</span></a>
                                </li>
                                <li><a href="form-validation.html"><i class="fa fa-exclamation"></i><span class="submenu-title">Form Validation</span></a>
                                </li>
                                <li><a href="form-multiple-file-upload.html"><i class="fa fa-upload"></i><span class="submenu-title">Multiple File Upload</span></a>
                                </li>
                                <li><a href="form-dropzone-file-upload.html"><i class="fa fa-cloud-upload"></i><span class="submenu-title">Dropzone File Upload</span></a>
                                </li>
                            </ul>
                        </li>
                        <li class="active"><a href="#"><i class="fa fa-th-list fa-fw"><div class="icon-bg bg-blue"></div></i><span class="menu-title">Tables</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level in">
                                <li><a href="table-basic.html"><i class="fa fa-th-large"></i><span class="submenu-title">Basic Tables</span></a>
                                </li>
                                <li><a href="table-responsive.html"><i class="fa fa-tablet"></i><span class="submenu-title">Responsive Tables</span></a>
                                </li>
                                <li><a href="table-action.html"><i class="fa fa-tencent-weibo"></i><span class="submenu-title">Action Tables</span></a>
                                </li>
                                <li><a href="table-filter.html"><i class="fa fa-filter"></i><span class="submenu-title">Filter Tables</span></a>
                                </li>
                                <li class="active"><a href="table-advanced.html"><i class="fa fa-indent"></i><span class="submenu-title">Advanced Tables</span></a>
                                </li>
                                <li><a href="table-export.html"><i class="fa fa-paperclip"></i><span class="submenu-title">Table Export</span><span class="label label-yellow">v2.1</span></a>
                                </li>
                                <li></li>
                                <li><a href="table-editable.html"><i class="fa fa-edit"></i><span class="submenu-title">Jeditable</span><span class="label label-blue">v2.0        </span></a>
                                </li>
                                <li><a href="table-datatables.html"><i class="fa fa-list-alt"></i><span class="submenu-title">DataTables</span><span class="label label-pink">v2.0</span></a>
                                </li>
                                <li><a href="table-sample.html"><i class="fa fa-table"></i><span class="submenu-title">Sample Tables</span></a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-database fa-fw"><div class="icon-bg bg-red"></div></i><span class="menu-title">Data Grids</span><span class="fa arrow"></span><span class="label label-yellow">Hot</span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="#"><i class="fa fa-th-large"></i><span class="submenu-title">Layout Examples</span><span class="fa arrow"></span></a>
                                    <ul class="nav nav-third-level">
                                        <li><a href="grid-layout-div.html"><i class="fa fa-angle-right"></i><span class="submenu-title">DIVs Layout</span></a>
                                        </li>
                                        <li><a href="grid-layout-table-1.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Table Demo 1</span></a>
                                        </li>
                                        <li><a href="grid-layout-table-2.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Table Demo 2</span></a>
                                        </li>
                                        <li><a href="grid-layout-2-table.html"><i class="fa fa-angle-right"></i><span class="submenu-title">2 Tables on the Page</span></a>
                                        </li>
                                        <li><a href="grid-layout-ul-li.html"><i class="fa fa-angle-right"></i><span class="submenu-title">UL LI</span></a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#"><i class="fa fa-tencent-weibo"></i><span class="submenu-title">Actions Examples</span><span class="fa arrow"></span></a>
                                    <ul class="nav nav-third-level">
                                        <li><a href="grid-filter-with-ul-li.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Filters With UL/LI</span></a>
                                        </li>
                                        <li><a href="grid-filter-with-select.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Filters With SELECT</span></a>
                                        </li>
                                        <li><a href="grid-double-sort.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Double Sort</span></a>
                                        </li>
                                        <li><a href="grid-deep-linking.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Deep Linking</span></a>
                                        </li>
                                        <li><a href="grid-pagination-only.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Pagination Only</span></a>
                                        </li>
                                        <li><a href="grid-without-item-per-page.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Without "Items per Page"</span></a>
                                        </li>
                                        <li><a href="grid-hidden-sort.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Hidden Sort</span></a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#"><i class="fa fa-table"></i><span class="submenu-title">jPList with jQuery UI</span><span class="fa arrow"></span></a>
                                    <ul class="nav nav-third-level">
                                        <li><a href="grid-range-slider.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Range Slider</span></a>
                                        </li>
                                        <li><a href="grid-datepicker.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Date Picker Filter</span></a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-file-o fa-fw"><div class="icon-bg bg-yellow"></div></i><span class="menu-title">Pages</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="page-gallery.html"><i class="fa fa-suitcase"></i><span class="submenu-title">Gallery</span></a>
                                </li>
                                <li><a href="page-timeline.html"><i class="fa fa-steam"></i><span class="submenu-title">Timeline</span></a>
                                </li>
                                <li><a href="page-blog.html"><i class="fa fa-puzzle-piece"></i><span class="submenu-title">Blog</span></a>
                                </li>
                                <li><a href="page-blog-item.html"><i class="fa fa-chain"></i><span class="submenu-title">Blog Item</span></a>
                                </li>
                                <li><a href="page-about.html"><i class="fa fa-group"></i><span class="submenu-title">About Us</span></a>
                                </li>
                                <li><a href="page-contact.html"><i class="fa fa-send-o"></i><span class="submenu-title">Contact Us</span></a>
                                </li>
                                <li><a href="page-calendar.html"><i class="fa fa-calendar"></i><span class="submenu-title">Full Calendar</span></a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-gift fa-fw"><div class="icon-bg bg-grey"></div></i><span class="menu-title">Extras</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="extra-profile.html"><i class="fa fa-user"></i><span class="submenu-title">User Profile</span></a>
                                </li>
                                <li><a href="extra-signin.html"><i class="fa fa-sign-in"></i><span class="submenu-title">Sign In</span></a>
                                </li>
                                <li><a href="extra-signup.html"><i class="fa fa-sign-out"></i><span class="submenu-title">Sign Up</span></a>
                                </li>
                                <li><a href="extra-lock-screen.html"><i class="fa fa-lock"></i><span class="submenu-title">Lock Screen</span></a>
                                </li>
                                <li><a href="extra-user-list.html"><i class="fa fa-user"></i><span class="submenu-title">User List</span><span class="label label-yellow">v2.1</span></a>
                                </li>
                                <li><a href="extra-invoice.html"><i class="fa fa-print"></i><span class="submenu-title">Invoice</span></a>
                                </li>
                                <li><a href="extra-faq.html"><i class="fa fa-graduation-cap"></i><span class="submenu-title">FAQ</span></a>
                                </li>
                                <li><a href="extra-pricing-table.html"><i class="fa fa-money"></i><span class="submenu-title">Pricing Tables</span></a>
                                </li>
                                <li><a href="extra-blank.html"><i class="fa fa-file-o"></i><span class="submenu-title">Blank</span></a>
                                </li>
                                <li><a href="extra-404.html"><i class="fa fa-exclamation-circle"></i><span class="submenu-title">404 Page</span></a>
                                </li>
                                <li><a href="extra-500.html"><i class="fa fa-exclamation-circle"></i><span class="submenu-title">500 Page</span></a>
                                </li>
                                <li><a href="javascript:void(0)" title="FullScreen" class="btn-fullscreen"><i class="fa fa-arrows"></i><span class="submenu-title">Full Screen</span></a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-sitemap fa-fw"><div class="icon-bg bg-dark"></div></i><span class="menu-title">Multi-Level Dropdown</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="#"><i class="fa fa-angle-right"></i><span class="submenu-title">Second Level Item</span></a>
                                </li>
                                <li><a href="#"><i class="fa fa-angle-right"></i><span class="submenu-title">Second Level Item</span></a>
                                </li>
                                <li><a href="#"><i class="fa fa-angle-right"></i><span class="submenu-title">Third Level</span><span class="fa arrow"></span></a>
                                    <ul class="nav nav-third-level">
                                        <li><a href="#"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Third Level Item</span></a>
                                        </li>
                                        <li><a href="#"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Third Level Item</span></a>
                                        </li>
                                        <li><a href="#"><i class="fa fa-angle-double-right"></i><span class="submenu-title"> Third Level Item</span></a>
                                        </li>
                                        <li><a href="#"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Third Level Item</span></a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-envelope-o"><div class="icon-bg bg-primary"></div></i><span class="menu-title">Email</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="email-inbox.html"><i class="fa fa-inbox"></i><span class="submenu-title">Inbox</span></a>
                                </li>
                                <li><a href="email-compose-mail.html"><i class="fa fa-pencil"></i><span class="submenu-title">Compose Mail</span></a>
                                </li>
                                <li><a href="email-view-mail.html"><i class="fa fa-eye"></i><span class="submenu-title">View Mail</span></a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-bar-chart-o fa-fw"><div class="icon-bg bg-orange"></div></i><span class="menu-title">Charts</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="charts-flotchart.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Flot Charts</span></a>
                                </li>
                                <li><a href="charts-chartjs.html"><i class="fa fa-angle-right"></i><span class="submenu-title">Chartjs</span></a>
                                </li>
                                <li><a href="#"><i class="fa fa-angle-right"></i><span class="submenu-title">HighCharts</span><span class="fa arrow"></span></a>
                                    <ul class="nav nav-third-level">
                                        <li><a href="charts-highchart-line.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Line Charts</span></a>
                                        </li>
                                        <li><a href="charts-highchart-area.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Area Charts</span></a>
                                        </li>
                                        <li><a href="charts-highchart-column-bar.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Column & Bar Charts</span></a>
                                        </li>
                                        <li><a href="charts-highchart-pie.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Pie Charts</span></a>
                                        </li>
                                        <li><a href="charts-highchart-scatter-bubble.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Scatter & Bubble Charts</span></a>
                                        </li>
                                        <li><a href="charts-highchart-dynamic.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Dynamic Charts</span></a>
                                        </li>
                                        <li><a href="charts-highchart-combinations.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">Combinations</span></a>
                                        </li>
                                        <li><a href="charts-highchart-more.html"><i class="fa fa-angle-double-right"></i><span class="submenu-title">More Chart Types</span></a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="animations.html"><i class="fa fa-slack fa-fw"><div class="icon-bg bg-green"></div></i><span class="menu-title">Animations</span></a>
                        </li>
                        <!--li.charts-sum<div id="ajax-loaded-data-sidebar"></div>-->
                    </ul>
                </div>
            </nav>
            <!--END SIDEBAR MENU-->
            <!--BEGIN CHAT FORM-->
            <div id="chat-form" class="fixed">
                <div class="chat-inner">
                    <h2 class="chat-header"><a href="javascript:;" class="chat-form-close pull-right"><i class="glyphicon glyphicon-remove"></i></a><i class="fa fa-user"></i>&nbsp;
Chat
&nbsp;<span class="badge badge-info">3</span></h2>
                    <div id="group-1" class="chat-group"><strong>Favorites</strong><a href="#"><span class="user-status is-online"></span><small>Verna Morton</small><span class="badge badge-info">2</span></a><a href="#"><span class="user-status is-online"></span><small>Delores Blake</small><span class="badge badge-info is-hidden">0</span></a><a href="#"><span class="user-status is-busy"></span><small>Nathaniel Morris</small><span class="badge badge-info is-hidden">0</span></a><a href="#"><span class="user-status is-idle"></span><small>Boyd Bridges</small><span class="badge badge-info is-hidden">0</span></a><a href="#"><span class="user-status is-offline"></span><small>Meredith Houston</small><span class="badge badge-info is-hidden">0</span></a>
                    </div>
                    <div id="group-2" class="chat-group"><strong>Office</strong><a href="#"><span class="user-status is-busy"></span><small>Ann Scott</small><span class="badge badge-info is-hidden">0</span></a><a href="#"><span class="user-status is-offline"></span><small>Sherman Stokes</small><span class="badge badge-info is-hidden">0</span></a><a href="#"><span class="user-status is-offline"></span><small>Florence Pierce</small><span class="badge badge-info">1</span></a>
                    </div>
                    <div id="group-3" class="chat-group"><strong>Friends</strong><a href="#"><span class="user-status is-online"></span><small>Willard Mckenzie</small><span class="badge badge-info is-hidden">0</span></a><a href="#"><span class="user-status is-busy"></span><small>Jenny Frazier</small><span class="badge badge-info is-hidden">0</span></a><a href="#"><span class="user-status is-offline"></span><small>Chris Stewart</small><span class="badge badge-info is-hidden">0</span></a><a href="#"><span class="user-status is-offline"></span><small>Olivia Green</small><span class="badge badge-info is-hidden">0</span></a>
                    </div>
                </div>
                <div id="chat-box" style="top:400px">
                    <div class="chat-box-header"><a href="#" class="chat-box-close pull-right"><i class="glyphicon glyphicon-remove"></i></a><span class="user-status is-online"></span><span class="display-name">Willard Mckenzie</span><small>Online</small>
                    </div>
                    <div class="chat-content">
                        <ul class="chat-box-body">
                            <li>
                                <p><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" class="avt" /><span class="user">John Doe</span><span class="time">09:33</span>
                                </p>
                                <p>Hi Swlabs, we have some comments for you.</p>
                            </li>
                            <li class="odd">
                                <p><img src="https://s3.amazonaws.com/uifaces/faces/twitter/alagoon/48.jpg" class="avt" /><span class="user">Swlabs</span><span class="time">09:33</span>
                                </p>
                                <p>Hi, we're listening you...</p>
                            </li>
                        </ul>
                    </div>
                    <div class="chat-textarea">
                        <input placeholder="Type your message" class="form-control" />
                    </div>
                </div>
            </div>
            <!--END CHAT FORM-->
            <!--BEGIN PAGE WRAPPER-->
            <div id="page-wrapper">
                <!--BEGIN TITLE & BREADCRUMB PAGE-->
                <div id="title-breadcrumb-option-demo" class="page-title-breadcrumb">
                    <div class="page-header pull-left">
                        <div class="page-title">Tables Advanced</div>
                    </div>
                    <ol class="breadcrumb page-breadcrumb">
                        <li><i class="fa fa-home"></i>&nbsp;<a href="index.html">Home</a>&nbsp;&nbsp;<i class="fa fa-angle-right"></i>&nbsp;&nbsp;</li>
                        <li><a href="#">Tables</a>&nbsp;&nbsp;<i class="fa fa-angle-right"></i>&nbsp;&nbsp;</li>
                        <li class="active">Tables Advanced</li>
                    </ol>
                    <div class="btn btn-blue reportrange hide"><i class="fa fa-calendar"></i>&nbsp;<span></span>&nbsp;report&nbsp;<i class="fa fa-angle-down"></i>
                        <input type="hidden" name="datestart" />
                        <input type="hidden" name="endstart" />
                    </div>
                    <div class="clearfix"></div>
                </div>
                <!--END TITLE & BREADCRUMB PAGE-->
                <!--BEGIN CONTENT-->
                <div class="page-content">
                    <div id="table-advanced" class="row">
                        <div class="col-lg-12">
                            <ul id="tableadvancedTab" class="nav nav-tabs">
                                <li class="active"><a href="#table-sorter-tab" data-toggle="tab">Sorter</a>
                                </li>
                                <li><a href="#table-color-tab" data-toggle="tab">Header Colors</a>
                                </li>
                                <li><a href="#table-size-tab" data-toggle="tab">Size</a>
                                </li>
                                <li><a href="#table-sticky-tab" data-toggle="tab">Sticky Header</a>
                                </li>
                            </ul>
                            <div id="tableadvancedTabContent" class="tab-content">
                                <div id="table-sorter-tab" class="tab-pane fade in active">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <h3 class="mtn">Basic Sorter</h3>
                                            <table class="table table-hover table-striped table-bordered table-advanced tablesorter">
                                                <thead>
                                                    <tr>
                                                        <th width="3%">
                                                            <input type="checkbox" class="checkall" />
                                                        </th>
                                                        <th width="9%">Record #</th>
                                                        <th>Username</th>
                                                        <th width="10%">Country</th>
                                                        <th width="10%">Gender</th>
                                                        <th width="7%">Order</th>
                                                        <th width="12%">Date</th>
                                                        <th width="10%">Price</th>
                                                        <th width="9%">Status</th>
                                                        <th width="12%">Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>32</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-success">Approved</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>45</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-info">Pending</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>40</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-warning">Suspended</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>15</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-danger">Blocked</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>5</td>
                                                        <td>Henry</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>32</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-success">Approved</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <hr class="mtxl mbxl" />
                                            <h3>Multiple Headers Sorter</h3>
                                            <table class="table table-hover table-striped table-bordered table-advanced tablesorter">
                                                <thead>
                                                    <tr>
                                                        <th colspan="2">General information</th>
                                                        <th colspan="3">Degree information</th>
                                                        <th rowspan="2">Geometry</th>
                                                        <tr>
                                                            <th>Major</th>
                                                            <th>Gender</th>
                                                            <th>English</th>
                                                            <th>Japanese</th>
                                                            <th>Calculus</th>
                                                        </tr>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Student01</td>
                                                        <td>Languages</td>
                                                        <td>male</td>
                                                        <td></td>
                                                        <td>70</td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Student02</td>
                                                        <td>Mathematics</td>
                                                        <td>male</td>
                                                        <td>90</td>
                                                        <td>88</td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Student03</td>
                                                        <td>Languages</td>
                                                        <td>female</td>
                                                        <td>85</td>
                                                        <td>95</td>
                                                        <td>80</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div id="table-color-tab" class="tab-pane fade">
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <h3 class="mtn">Header Default</h3>
                                            <table class="table table-hover table-bordered table-advanced">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <hr class="mtxl mbxl" />
                                            <h3>Header Warning</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="warning">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <hr class="mtxl mbxl" />
                                            <h3>Header Red</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="red">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <hr class="mtxl mbxl" />
                                            <h3>Header Yellow</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="yellow">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <hr class="mtxl mbxl" />
                                            <h3>Header Violet</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="violet">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <hr class="mtxl mbxl" />
                                            <h3>Header White</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="white">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-lg-4">
                                            <h3 class="mtn">Header Primary</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="primary">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <hr class="mtxl mbxl" />
                                            <h3>Header Info</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="info">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <hr class="mtxl mbxl" />
                                            <h3>Header Orange</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="orange">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <hr class="mtxl mbxl" />
                                            <h3>Header Blue</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="blue">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <hr class="mtxl mbxl" />
                                            <h3>Header Grey</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="grey">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-lg-4">
                                            <h3 class="mtn">Header Success</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="success">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <hr class="mtxl mbxl" />
                                            <h3>Header Danger</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="danger">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <hr class="mtxl mbxl" />
                                            <h3>Header Green</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="green">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <hr class="mtxl mbxl" />
                                            <h3>Header Pink</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="pink">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <hr class="mtxl mbxl" />
                                            <h3>Header Dark</h3>
                                            <table class="table table-hover table-advanced table-bordered">
                                                <thead class="dark">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-default">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-default">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-default">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-default">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div id="table-size-tab" class="tab-pane fade">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <h3 class="mtn">Small Table</h3>
                                            <table class="table table-hover table-bordered table-advanced table-sm">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-success">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-info">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-warning">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-danger">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-lg-6">
                                            <h3 class="mtn">Normal Table</h3>
                                            <table class="table table-hover table-bordered table-advanced">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-success">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-info">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-warning">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-danger">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <h3>Large Table</h3>
                                            <table class="table table-hover table-bordered table-advanced table-lg">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Username</th>
                                                        <th>Age</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>23</td>
                                                        <td><span class="label label-sm label-success">Approved</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>45</td>
                                                        <td><span class="label label-sm label-info">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>30</td>
                                                        <td><span class="label label-sm label-warning">Suspended</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>15</td>
                                                        <td><span class="label label-sm label-danger">Blocked</span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div id="table-sticky-tab" class="tab-pane fade">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <h3 class="mtn">Fixed Header</h3>
                                            <p>Scroll down to see the sticky table header in action.</p>
                                            <table class="table table-hover table-striped table-bordered table-advanced tablesorter tb-sticky-header">
                                                <thead>
                                                    <tr>
                                                        <th width="3%">
                                                            <input type="checkbox" class="checkall" />
                                                        </th>
                                                        <th width="9%">Record #</th>
                                                        <th>Username</th>
                                                        <th width="10%">Country</th>
                                                        <th width="10%">Gender</th>
                                                        <th width="7%">Order</th>
                                                        <th width="12%">Date</th>
                                                        <th width="10%">Price</th>
                                                        <th width="9%">Status</th>
                                                        <th width="12%">Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>1</td>
                                                        <td>Henry</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>32</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-success">Approved</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>2</td>
                                                        <td>John</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>45</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-info">Pending</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>3</td>
                                                        <td>Larry</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>40</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-warning">Suspended</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>4</td>
                                                        <td>Lahm</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>15</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-danger">Blocked</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>5</td>
                                                        <td>Henry</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>32</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-success">Approved</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>6</td>
                                                        <td>John</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>41</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-info">Pending</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>7</td>
                                                        <td>Larry</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>43</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-warning">Suspended</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>8</td>
                                                        <td>Lahm</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>15</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-danger">Blocked</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>9</td>
                                                        <td>Henry</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>45</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-success">Approved</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>10</td>
                                                        <td>John</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>35</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-info">Pending</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>11</td>
                                                        <td>Larry</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>36</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-warning">Suspended</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>12</td>
                                                        <td>Lahm</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>17</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-danger">Blocked</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>13</td>
                                                        <td>Henry</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>68</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-success">Approved</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>14</td>
                                                        <td>John</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>36</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-info">Pending</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>15</td>
                                                        <td>Larry</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>26</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-warning">Suspended</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>16</td>
                                                        <td>Lahm</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>62</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-danger">Blocked</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>17</td>
                                                        <td>Henry</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>84</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-success">Approved</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>18</td>
                                                        <td>John</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>64</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-info">Pending</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>19</td>
                                                        <td>Larry</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>21</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-warning">Suspended</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>20</td>
                                                        <td>Lahm</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>18</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-danger">Blocked</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>21</td>
                                                        <td>Henry</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>32</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-success">Approved</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>22</td>
                                                        <td>John</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>52</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-info">Pending</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>23</td>
                                                        <td>Larry</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>55</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-warning">Suspended</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>24</td>
                                                        <td>Lahm</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>32</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-danger">Blocked</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>18</td>
                                                        <td>John</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>64</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-info">Pending</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>19</td>
                                                        <td>Larry</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>21</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-warning">Suspended</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>20</td>
                                                        <td>Lahm</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>18</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-danger">Blocked</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>21</td>
                                                        <td>Henry</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>32</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-success">Approved</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>22</td>
                                                        <td>John</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>52</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-info">Pending</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>23</td>
                                                        <td>Larry</td>
                                                        <td>United States</td>
                                                        <td>Female</td>
                                                        <td>55</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-warning">Suspended</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" />
                                                        </td>
                                                        <td>24</td>
                                                        <td>Lahm</td>
                                                        <td>United States</td>
                                                        <td>Male</td>
                                                        <td>32</td>
                                                        <td>20-05-2014</td>
                                                        <td>$240.50</td>
                                                        <td><span class="label label-sm label-danger">Blocked</span>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-default btn-xs"><i class="fa fa-edit"></i>&nbsp; Edit
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--END CONTENT-->
            </div>
            <!--BEGIN FOOTER-->
            <div id="footer">
                <div class="copyright">2014 © &mu;Admin - Responsive Multi-Style Admin Template</div>
            </div>
            <!--END FOOTER-->
            <!--END PAGE WRAPPER-->
        </div>
    </div>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <!--loading bootstrap js-->
    <script src="vendors/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendors/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <script src="vendors/metisMenu/jquery.metisMenu.js"></script>
    <script src="vendors/slimScroll/jquery.slimscroll.js"></script>
    <script src="vendors/jquery-cookie/jquery.cookie.js"></script>
    <script src="vendors/iCheck/icheck.min.js"></script>
    <script src="vendors/iCheck/custom.min.js"></script>
    <script src="vendors/jquery-notific8/jquery.notific8.min.js"></script>
    <script src="vendors/jquery-highcharts/highcharts.js"></script>
    <script src="js/jquery.menu.js"></script>
    <script src="vendors/jquery-pace/pace.min.js"></script>
    <script src="vendors/holder/holder.js"></script>
    <script src="vendors/responsive-tabs/responsive-tabs.js"></script>
    <script src="vendors/jquery-news-ticker/jquery.newsTicker.min.js"></script>
    <script src="vendors/moment/moment.js"></script>
    <script src="vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
    <!--CORE JAVASCRIPT-->
    <script src="js/main.js"></script>
    <!--LOADING SCRIPTS FOR PAGE-->
    <script src="vendors/jquery-tablesorter/jquery.tablesorter.js"></script>
    <script src="js/table-advanced.js"></script>
    <script type="text/javascript">
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
        ga('create', 'UA-145464-14', 'auto');
        ga('send', 'pageview');
    </script>
</body>

</html>